<template>
  <div class="counselor-page">
      <GhNavBar title="咨询师预约"  />
      <!-- 头部搜索栏 -->
      <div class="search" >
            <van-search
            placeholder="搜索"
            input-align="center"
           />
      </div>
      <!-- 下拉选择菜单栏 -->
      <div class="menu" >
        <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item v-model="selectedCity" :options="cities" @change="handleCityChange" />
            <van-dropdown-item v-model="selectedSpecialty" :options="specialties" @change="handleSpeChange" />
          </van-dropdown-menu>
      </div>
      <!-- 医生列表 -->
       <div class="counselor-list" v-if="items.length>0">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <div class="infoItem"  v-for="item1 in items" :key="item1.id" @click="toDetailConsultant(item1)" >
                
                <div class="img-box">
                 <div class="icon"><span>{{item1.coun_label}}星</span></div>
                <img :src="item1.avatar" alt="" >
               </div>
               <div class="reduce-box">
                <p class="name">{{item1.name}}</p>
                <p class="description">{{item1.introduction}}</p>
                <p class="days">0天可预约</p>
               </div>
            </div>
          </van-pull-refresh>
       </div>
       <van-empty style="margin-top: 120px;" v-else  description="暂无咨询师信息" />
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import GhNavBar from '@/components/gh-nav-bar.vue'
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router' 
import {getConsultants} from '@/services/admin'
import {getConsultantsByOrgid,getConsultantsByCityid,getConsultantsBySpeciality} from '@/services/booking'
import {getCities,getSpecialties} from '@/services/booking'
const router=useRouter()
const route =useRoute()
//点击进入咨询师详细信息页面
const toDetailConsultant=(item1)=>{
   router.push(`/detailConsultant/${item1.id}`)
}



    //城市列表信息
    const cities = ref([]);
    //擅长领域信息
    const specialties = ref([]);
    const selectedCity = ref(0);
    const selectedSpecialty = ref(0);



   const items=ref([])
//获取全部咨询师信息
const fetchData=async()=>{
  const org_id=route.params.id;
  // console.log(org_id)
    const res=await getConsultantsByOrgid(org_id)
    // console.log(res)
    const citiesData=await getCities()
    const specialtiesData=await getSpecialties()
   cities.value=transformCitiesData(citiesData.data)
   specialties.value=transformdSpecialtiesData(specialtiesData.data)
    items.value=res.data
}

onMounted(fetchData)

 
// 转换后端返回的城市数据为适合 Vant 组件的格式
const transformCitiesData = (data) => {
  const transformedData = data.map(item => {
    return { text: item.name, value: item.id };
  });
  // 在数组头部加入 "所有城市" 的信息
  transformedData.unshift({ text: '所有城市', value: 0 });
  return transformedData;
};
const transformdSpecialtiesData = (data) => {
  const transformedData = data.map(item => {
    return { text: item.name, value: item.id };
  });
  // 在数组头部加入 "擅长领域" 的信息
  transformedData.unshift({ text: '擅长领域', value: 0 });
  return transformedData;
};
 
//切换城市获取不同的咨询师信息
const handleCityChange =async()=>{
   if(selectedCity.value==0){
    if(selectedSpecialty.value==0){
      const org_id=route.params.id;
       // console.log(org_id)
       const res=await getConsultantsByOrgid(org_id)
       items.value=res.data
       return
    }
     else{
       const data4 =await getConsultantsBySpeciality(selectedSpecialty.value)
       const org_id=route.params.id;
      // console.log(org_id)
       const res=await getConsultantsByOrgid(org_id)
       const tran3=res.data.filter(obj1=>{
        return data4.data.some(obj2=>obj1.id===obj2.id)
       })
       items.value=tran3
       return
     }
   }
   else{
    if(selectedSpecialty.value==0){
  // console.log(selectedCity.value)
    const org_id=route.params.id;
    // console.log(org_id)
    const res=await getConsultantsByOrgid(org_id)
    items.value=res.data
    const res2=await getConsultantsByCityid(selectedCity.value)
    const resArray=res2.data
    const filteredArray=items.value.filter(obj1=>{
      return resArray.some(obj2=>obj1.id===obj2.id)
    })
    items.value=filteredArray
    }
    else{
      const org_id=route.params.id;
      // console.log(org_id)
       const res=await getConsultantsByOrgid(org_id)
      const data5=await getConsultantsBySpeciality(selectedSpecialty.value)
      const tran2=res.data.filter(obj1=>{
          return data5.data.some(obj2=>obj1.id===obj2.id)
        })
      const res5=await getConsultantsByCityid(selectedCity.value)
      const resArray2=tran2.filter(obj1=>{
        return res5.data.some(obj2=>obj1.id===obj2.id)
      })
      items.value=resArray2
    }
   }
  
}
//切换不同擅长领域获取不同的咨询师信息
const handleSpeChange=async()=>{
    if(selectedSpecialty.value==0){
      if(selectedCity.value==0){
        const org_id=route.params.id;
        const res=await getConsultantsByOrgid(org_id)
        items.value=res.data
        return
      }
      else{
        const org_id=route.params.id;
      // console.log(org_id)
       const res=await getConsultantsByOrgid(org_id)
        const data1=await getConsultantsByCityid(selectedCity.value)
        const tran4=res.data.filter(obj1=>{
          return data1.data.some(obj2=>obj1.id===obj2.id)
        })
        items.value=tran4
        return
      }
    }
    else{
      if(selectedCity.value==0){
        const org_id=route.params.id;
      // console.log(org_id)
      const res=await getConsultantsByOrgid(org_id)
      items.value=res.data
      const res3=await getConsultantsBySpeciality(selectedSpecialty.value)
      // console.log(res3.data)
      const resArray1=res3.data
      const filteredArray1=items.value.filter(obj1=>{
       return resArray1.some(obj2=>obj1.id===obj2.id)
       })
      items.value=filteredArray1
      }
      else{
        const org_id=route.params.id;
      // console.log(org_id)
       const res=await getConsultantsByOrgid(org_id)
        const data2=await getConsultantsByCityid(selectedCity.value)
        const tran1=res.data.filter(obj1=>{
          return data2.data.some(obj2=>obj1.id===obj2.id)
        })
        const res4=await getConsultantsBySpeciality(selectedSpecialty.value)
        const filteredArray2=tran1.filter(obj1=>{
          return  res4.data.some(obj2=>obj1.id===obj2.id)
        })
        items.value=filteredArray2
      }
    }
   
}

const loading = ref(false);
   const onRefresh = () => {
    loading.value=true
    fetchData()
       Toast.success('刷新成功')
     loading.value=false
    };


</script>

<style lang="scss" scoped>
.counselor-page{
    width: 100%;
    /* height: 100vh; */
    background-color: #F5F5F5;
    .search{
       position: fixed;
       top: 40px;
       left: 0;
       z-index: 999;
       width: 100%;
    }
    .menu{
        position: fixed;
        top:90px;
        width: 100%;
        z-index: 999;
        left: 0;
    }
    .counselor-list{
        /* padding: 120px 0 ; */
        margin-top: 130px;
        height: 100%;
        .infoItem{
            display: flex;
            height: 110px;
            margin: 15px 10px 0;
            border-radius: 10px;
	        border-bottom-left-radius: 20px;
	        border-top-right-radius: 20px;
	        border: 2px solid var(--projectColorLight);
            background-color:  #FFFFFF;
            .img-box{
                 position: relative;
                  height: 100%;
                  width: 80px;
                 .icon{
                    position: absolute;
                    text-align: center;
                    height: 18px;
                    line-height: 18px;
                    width: 25px;
                    background-color: #3BAFCC;
                    border-bottom-right-radius: 5px;
	                border-top-left-radius: 5px;
                    span{
                        color: #fff;
                        font-size: 10px;
                    }
                 }
                 img{
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
	                border-bottom-left-radius: 20px;
	                border-top-right-radius: 20px;
	                border: 2px solid var(--projectColorLight);
                 }

            }
            .reduce-box{
                flex: 1;
                margin-left: 5px;
                padding: 5px 15px 0;
                font-family: '黑体';
                .name{
                    font-size: 12px;
                    font-weight: bold;
                    border-bottom: #F5F5F5 1px solid;
                }
                .description{
                    margin-top: 6px;
                      color: #888888;
                      font-size: 10px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 3;
                }
                .days{
                    margin-top: 10px;
                    color: #888888;
                    font-size: 10px;
                }
            }
        }
    }
}


</style>
